<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-fold">首页</el-breadcrumb-item>
                <el-breadcrumb-item>账户管理</el-breadcrumb-item>
                <el-breadcrumb-item>账户查询</el-breadcrumb-item>
                <el-breadcrumb-item>账户详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div>
            <el-descriptions class="margin-top" title="账户详情" :column="3" border>
                <template slot="extra">
                    <el-button type="primary" size="small" @click="goback()">返回列表</el-button>
                </template>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        签约日期
                    </template>
                    {{Account.aContractStartTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        用户标识
                    </template>
                    {{Account.aUid}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        姓名
                    </template>
                    {{Account.aName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{Account.aMobile}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        身份证
                    </template>
                    {{Account.aIdcar}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        使用产品
                    </template>
                    {{Account.aProductName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        信用额度
                    </template>
                    {{Account.aCreditLimit}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        已用额度
                    </template>
                    {{Account.aUsedLimit}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        欠款金额
                    </template>
                    {{Account.aDebtMoney}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        欠款本金
                    </template>
                    {{Account.aDebtCapita}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        利息
                    </template>
                    {{Account.aDebtInterest}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        资方名称
                    </template>
                    {{Account.aInvestorName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        还款日
                    </template>
                    {{Account.aDebtCapita}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        合同结束时间
                    </template>
                    {{Account.aContractEndTime}}
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <div style="margin-top: 20px">
            <el-button @click="findRepaymentList()" autofocus>还款明细</el-button>
            <el-button @click="findLoadList()">借款明细</el-button>
        </div>

        <!--这是还款明细-->
        <div :class="RepaymentListisshow">
            <el-table
                    :data="RepaymentList"
                    border
                    :row-style="selectedstyle"
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="rRepaymentTime"
                        label="还款日期"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="rUid"
                        label="用户标识"
                        width="260">
                </el-table-column>
                <el-table-column
                        prop="rNum"
                        label="期数"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="rOwingPrincipal"
                        label="当期欠款本金"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rOwingInterest"
                        label="当期欠款利息"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rOwingMoney"
                        label="当期欠款总额"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rPrincipalRepaid"
                        label="当期已还本金"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rInterestRepaid"
                        label="当期已还利息"
                        width="120">
                </el-table-column>

                <el-table-column
                        prop="rOverdueDays"
                        label="逾期天数"
                        width="120"
                        :formatter="methodtype">
                </el-table-column>
                <el-table-column
                        prop="rOverdueCharge"
                        label="逾期罚息"
                        width="120"
                        :formatter="methodtype">
                </el-table-column>

                <el-table-column
                        prop="rRepaymentStatus"
                        label="本期是否结清"
                        width="120"
                        :formatter="rRepaymentStatustype">
                </el-table-column>
            </el-table>

            <!--分页模块-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[5,10]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>

        <!--这是借款明细-->
        <div :class="LoadListisshow">
            <el-table
                    :data="LoadList"
                    :row-style="loadstyle"
                    style="width: 100%">

                <el-table-column
                        prop="lLoadStartTime"
                        label="发起时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="lName"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="lIdcard"
                        label="身份证"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="lMobile"
                        label="手机号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="lProductName"
                        label="产品类型"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="lReceiptNo"
                        label="借据号"
                        width="320">
                </el-table-column>
                <el-table-column
                        prop="lLoadMoney"
                        label="借款金额"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="lIntestall"
                        label="总利息"
                        width="150">
                </el-table-column>

                <el-table-column
                        prop="lRepaymentMethod"
                        label="还款方式"
                        width="120"
                        :formatter="Repaymenttype">
                </el-table-column>

                <el-table-column
                        prop="lInvestorName"
                        label="资方名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="lCollectionBankcard"
                        label="收款卡"
                        width="120">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        prop="lLoadStatus"
                        label="状态"
                        show-overflow-tooltip
                        :formatter="loadformtype">
                </el-table-column>

            </el-table>

            <!--分页模块-->
            <div class="block">
                <el-pagination
                        @size-change="loadSizeChange"
                        @current-change="loadCurrentChange"
                        :current-page="pageNum1"
                        :page-sizes="[5,10]"
                        :page-size="pageSize1"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total1">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Accountmanager",
        data(){
            return{
                aUid:this.$route.params.aUid,
                Account:{},
                RepaymentList:[],
                LoadList:[],
                pageNum: 1,
                pageNum1: 1,
                pageSize: 5,
                pageSize1: 5,
                total:0,//共多少条
                total1:0,//共多少条
                RepaymentListisshow:'',
                LoadListisshow:''
            }
        },
        methods:{
            goback(){
                location.href="/account"
            },
            //根据信息来渲染不同的布局属性
            selectedstyle ({row, rowIndex}) {
                if(row.rRepaymentStatus==1){
                    return {
                        "background-color": "#ABEA7F"
                    };
                }else if(row.rRepaymentStatus==0){
                    return {
                        "background-color": "#C9C5C8"
                    };
                }
            },
            loadstyle({row, rowIndex}) {
                if(row.lLoadStatus==1){
                    return {
                        "background-color": "#ABEA7F"
                    };
                }else if(row.lLoadStatus==0){
                    return {
                        "background-color": "#C9C5C8"
                    };
                }
            },
            loadformtype(row, column, cellValue){
                if (cellValue == 1) {
                    return '通过审核';
                } else if (cellValue == 0) {
                    return '已拒绝';
                }
            },

            rRepaymentStatustype(row, column, cellValue) {
                if (cellValue == 1) {
                    return '结清';
                } else if (cellValue == 0) {
                    return '未结清';
                }
            },
            methodtype(row, column, cellValue){
                if (cellValue == ""||cellValue == 0||cellValue==null) {
                    return '暂无信息';
                } else if (cellValue <0) {
                    return '数据异常';
                }
            },
            Repaymenttype(row, column, cellValue){
                if (cellValue == 1) {
                    return '按日计息';
                } else if (cellValue == 2) {
                    return '按期还款';
                }
            },
            //查看还款详情
            findRepaymentList(){
                this.RepaymentListisshow="showdiv";
                this.LoadListisshow="hiddendiv";
                let url=this.$baseUrl+"repayment/findOne";
                this.$axios.get(url,{
                    params:{
                        aUid:this.aUid,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.code == 200){
                        this.RepaymentList = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total
                    }else {
                        this.$alert("查询失败!")
                    }
                })
            },
            //查看借款明细
            findLoadList(){
                this.LoadListisshow="showdiv";
                this.RepaymentListisshow="hiddendiv";
                let url=this.$baseUrl+"loanApplication/showUserLoan"
                this.$axios.get(url,{
                    params: {
                        aUid:this.aUid,
                        pageNum: this.pageNum1,
                        pageSize: this.pageSize1
                    }}).then(res=>{
                    if (res.data.code == 200){
                        this.LoadList = res.data.data.list;
                        this.pageNum1 = res.data.data.pageNum;
                        this.pageSize1 = res.data.data.pageSize;
                        this.total1 = res.data.data.total
                    }else {
                        this.$alert(res.data.msg)
                    }
                })
            },
            handleSizeChange(size){
                this.pageSize = size;
                this.findRepaymentList();
            },
            loadSizeChange(size){
                this.pageSize = size;
                this.findLoadList();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.findRepaymentList();
            },
            loadCurrentChange(val){
                this.pageNum = val;
                this.findLoadList();
            }
        },
        created(){
            let url =this.$baseUrl+"ananger/findOne/"+this.aUid
            this.$axios.get(url).then(res=>{
                if (res.data.code == 200){
                    this.Account=res.data.data;
                }else {
                    this.$alert(res.data.msg)
                }
            });
            this.findRepaymentList();
        }
    }
</script>

<style scoped>

    .showdiv{
        display: block;
    }
    .hiddendiv{
        display: none;
    }
</style>